jQuery Source code裏很多正規表示式,如
41: quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
,
51: rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
,
55: rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
56: rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
57: rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
,
不過大家在用jQuery時,少用到正規表示式。
從wiki來看,Historically, the concept of regular expressions is associated with Kleene's formalism of regular sets, introduced in the 1950s.
1950年代就介紹了,中文維基,說:
1940年代,Warren McCulloch與Walter Pitts將神經系統中的神經元描述成小而簡單的自動控制元。
,在6歲的jQuery裏 ,有著60歲的靈魂。大約是這種意思。
因為筆者太少用到正規式了,所以總是很好奇,SQL裏,就只是用LIKE來過濾資料
可參考JavaScript 教學 24,http://ithelp.ithome.com.tw/question/10095577,快速上手。
在JS裏,用**/樣式 /,一開始以為少了字串引號,結果//**就像引號的效果,不用再加上,加上反而是另外的意思。上面節錄自源碼,都是這種寫法。
這裏舉一些例子來練習。
算是入門篇,都是擷取自jQuery裏的最簡單範例,方便自己熟悉這些符號。
/^-ms-/.test("ms123");
false //減號不是保留子
/^-ms-/.test("ab-ms123");
false //^是一開頭就要匹配
/^-ms-/.test("-ms123");
false //兩個減號都要
/^-ms-/.test("-ms-er123");
true
/^-ms-/.test("-ms-xxer123");
true
/^-ms-/.test("-ms-");
true
/^-ms-/.test("-45ms-");
false //一開頭要匹配
/-([a-z]|[0-9])/ig.test("-1234");
true //| 是或者
/-([a-z]|[0-9])/ig.test("-stuv");
true //[]中括號是有相符即可
/-([a-z]|[0-9])/ig.test("-1234stuv");
true //數字符號一起出現,也可,因為是或者
/-([a-z]|[0-9])/ig.test("1234stuv");
false //沒有減號
/-([a-z]|[0-9])/ig.test("1234stuv-");
false //樣式不符,先減號
/-([a-z]|[0-9])/ig.test("1234-stuv");
true //減號不必在最左邊,沒有^限定符號
/-([a-z]|[0-9])/ig.test("12-34-stuv");
true //多次匹配也可
/\S/.test(" ");
false //\S表示任一字元(可參考https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions)
/\S/.test("a");
true
/\S/.test("ABC");
true
/\S/.test("\n");
false //逃脫字元不行
/\S/.test("\t");
false //逃脫字元不行
/\S/.test("fghij");
true
/\s/.test("fghij");
false //小s是大S的相反
/\s/.test("\t");
true
/\s/.test("\n");
true
/^\s+/.test(" ");
true //^表一開頭就要出現
/^\s+/.test(" ");
true //加號表示多個,1 or more times
/^\s+/.test(" ");
true //3個空白
/^\s+/.test(" ");
true //4個空白,jQuery是要匹配左邊的不限個數的空白
/^\s+/.test("1 ");
false //1是一般字元
/^\s+/.test("a ");
false
/^\s+/.test(" 234 ");
true //左邊有空白
/^\s+/.test("\n\n ");
true //左邊有2個逃脫字元
/\s+$/.test(" ");
true //$號表示結尾,後面(右邊)不能再加字元了
/\s+$/.test(" 123");
false //用逃脫字元結尾
/\s+$/.test(" 123 ");
true
/\s+$/.test("123 ");
true
/\s+$/.test("123 456");
false
/\s+$/.test("123 456 ");
true //可看出,jQuery利用這個樣式得到右邊的不定個數的空白
/\s+$/.test("123 456 \n\n\n");
true //可看出,jQuery利用這個樣式得到右邊的不定個數的逃脫字元
/\s+$/.test("123 456bbaa\n\n\n");
true
/\w/.test("aa");
true //也是保留字
/\w/.test("__");
true //含底線
/\w/.test("_");
true
/\w/.test(",");
false //不是字,是標點符號的逗點
/\w/.test(".");
false //是句號
/\w/.test("@");
false //可看出\w裏的字元比\S範圍還小
/\w/.test("WQ");
true
/\w./.test("WQ");
true
/\w./.test("W");
false //點.是保留字
/\w./.test("abb");
true //理解成一個位置
/\w./.test("a bb");
true //
/\w./.test("a\n bb");
true
/\w./.test("a\n bb");
true
/\w./.test("a\\n bb");
true
/\w./.test("abbbb");
true
/\w./.test("\nabbbb");
true
/\w./.test("\tabbbb");
true
/\w./.test("\t");
false
/\w./.test(" ");
false
/\w./.test("a ");
true
/\w./.test("\ta");
false
/\w./.test("\na");
false
/\w./.test("a\t");
true
/\w./.test("a");
false
/\w./.test("\ra");
false //字元後要再佔一個位置
/[\w.]+/.test("a ");
true //加上中括號,和上例做比較,
/[\w.]+/.test("b");
true //符合中括號內,任一個樣式,
/[\w.]+/.test("bbbb");
true //某一個符合即可
/[\w.]+/.test("__ __");
true
/[\w.]+/.test("\n");
false //沒有[A-Za-z0-9_]
/[\w.]+/.test("\n\t");
false //[A-Za-z0-9_]
/[\w.]+/.test("\n\t wer ");
true
/\s+/.test(" ");
true
/\s+/.test("sdfe"); //逃脫字元
false
/^0.55/.test("100"); //jQuery裏的例子,真的,沒蓋你
false
/^0.55/.test("0001");
false
/^0.55/.test("0.45");
false
/^0.55/.test("0.551");
true //開頭一開始要完全相符
/^0.55/.test("abcd");
false
/^0.55/.test("0.55abcd");
true //不是有效的小數也相符
/^0.55/.test("0.5");
false
/<h1>.*<\/h1>/.test("<h1>This is a heading.</h1>");
true //大於,小於符號不是逃脫字元
/<h1>.*<\/h1>/.test("<h1></h1>");
true
/<h1>.*<\/h1>/.test("<h1>\n\n</h1>");
false //點號是任何單字元(matches any single character except the newline character.)
/<h1>.*<\/h1>/.test("<h1>\r\r</h1>");
false //*星號表示0或多次
/<h1>.*<\/h1>/.test("<h1>y</h1>");
true //加號表示1或多次,符合這些實務情況
/(tim)/.test("hellotim");
true //基本,可看泰哥分享影片
/(tim)/.test("hello tim,what is tim doing");
true
/(tim)/.test("hello ti m,what is tim doing");
true
/(tim)/.test("hello ti m,what is ti m doing");
false
/(tim)/.test("123timefg,what is ti m doing");
true
/(tim)/.test("how many times");
true
/(?:tim)/.test("how many times");
true //問號是個讓筆者頭痛的正規式
/(?:tim)/.test("hello ti m,what is ti m doing");
false //定義是Matches 'tim' but does not remember the match. These are called non-capturing parentheses.不知邦友做何理解
/(?:abc){3}/.test("aaabbbccc");
false //大括號出現了
/(?:abc){3}/.test("abcbbbabc");
false //{3}表示只3次
/(?:abc){3}/.test("abcabcabc");
true
/(?:abc){3}/.test("abc abc abc"); //這樣不算3次
false
/(?:abc){3}/.test("abcabcabcabc"); //4包含3
true
/(?:abc){3}/.test("abcabc"); //2不到3
false
/(?:abc){3}/.test("abc");
false
/(?:abc){3}/.test("xxxabcabcabczzzzzzzzzz");
true
/(?:abc){3}/.test("xxxabc abcabczzzzzzzzzz");
false
/^(?:button|input)$/i.test("my button is not clicked");
false //來自jQuery的樣式
/^(?:button|input)$/i.test("This is my button");
false //注意開頭結尾符號
/^(?:button|input)$/i.test("button");
true
/^(?:button|input)$/i.test("buttoninput");
false //管線號是或者
/^(?:button|input)$/i.test("input");
true
/^(?:button|input)$/i.test("Input");
true
/^(?:button|input)$/i.test("INput");
true //泰哥有提到的不分大小寫i
/^a(?:rea)?$/i.test("area");
true
/^a(?:rea)?$/i.test("Area");
true
/^a(?:rea)?$/i.test("ArEa");
true
/^a(?:rea)?$/i.test("bArEab");
false //這是jQuery裏的例子,你覺得有必要這樣寫嗎?
/^area$/i.test("bArEab");
false //筆者細看原樣式還有另一個問號(?)是 0 or 1 time. Equivalent to {0,1}.所以
/^a(?:rea)?$/i.test("a"); //jQuery裏的例子有兩種可能
true
網路上分享,正規式不是寫程式的人才須要會的技能,洪朝貴教授更視為比MS OFFICE更基本的技能,筆者只是覺得jQuery裏用在好多地方,不這樣用,會不會CODE早就超過1萬行,沒法維持這麼小巧。偶爾會有邦友問到資料解析的問題,看到邦上PHP高手WISEGUY,直覺反應的寫出正則式,
這回就下定決心要來用力練習一下。
雖然這和JS沒有多大關係,哈哈!!
很多語言不是原生支持正規式,就是有類別庫支持。正規式並不是JS專有。
中年人就是喜歡老東西,尤其是這老古董竟然比自已年紀還大。出生前就發展的很詳盡了,
真讓人覺得不可思議。